<template>
  <div class="pay">
    <div class="payment">
      <div class="title">支付页面</div>
      <div class="way">
        <span @click="payment('1')"><img src="../../assets/contract/img_zhifubao.png" alt=""></span>
        <span style="margin:0 10%" @click="payment('1')"><img src="../../assets/contract/img_wechat.png" alt=""></span>
        <span @click="payment('2')"><img src="../../assets/contract/zhuanzhang.png" alt=""></span>
      </div>
      <div class="info">
        <div v-if="mode === '2'" class="bank">
          <p><span>公司名称：</span><a>海富德网络科技（深圳）有限公司</a></p>
          <p><span>银行卡号：</span><a>752372978758</a></p>
          <p><span>开户行：</span><a>中国银行股份有限公司深圳中心区支行</a></p>
          <div class="money">
            <p><span>支付金额： ￥</span><a>1480</a></p>
            <p style="font-size:14px;color:#999">（支付后请联系工作人员）</p>
          </div>
          <div class="btn">
            <el-button @click="complete()">支付完成</el-button>
          </div>
        </div>
        <div v-else class="mobile">
          <div class="code" />
          <div class="money">
            <p><span>支付金额： ￥</span><a>1480</a></p>
            <p style="font-size:14px;color:#999">（支付后请联系工作人员）</p>
          </div>
          <div class="btn">
            <el-button @click="complete()">支付完成</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode: ''
    }
  },
  methods: {
    payment(val) {
      this.mode = val
    },
    complete() {
      this.$router.push({ path: '/aggregation/laborcontract' })
    }
  }
}
</script>

<style scoped>
.pay{
  width:100%;
  height:calc(100vh - 60px);
  padding:20px;
}
.payment{
  width:100%;
  height:100%;
  background:#fff;
}
.title{
  height:50px;
  border-bottom:1px solid #eee;
  line-height: 50px;
  font-size:16px;
  padding-left:30px;
}
.way{
  text-align: center;
  padding-top:80px;
}
.way>span{
  display:inline-block;
}
.way>span>img{
  border:1px dashed #ddd;
  border-radius:10px;
}
.info{
  width:450px;
  height:450px;
  box-shadow: -2px 0px 5px 1px #ddd,0px -2px 5px 1px #ddd,2px 0px 5px 1px #ddd,0px 2px 5px 1px #ddd;
  margin:auto;
  margin-top:80px;
}
.bank{
  width:100%;
  height:100%;
  padding:60px 80px;
}
.bank>p{
  margin:35px 0
}
.bank>p>span{
  font-size:12px;
  color:#999;
}
.bank>p>a{
  font-size:14px;
  color:#333;
  font-weight:bold;
}
.money{
  margin-top:60px;
  text-align: center;
}
.money>p>span{
  font-size:14px;
  color:#666;
}
.money>p>a{
  font-size:24px;
  font-weight:bold;
}
.mobile{
  width:100%;
  height:100%;
  padding:50px 80px;
}
.code{
  width: 180px;
  height: 180px;
  margin: 0 auto;
  background: #ddd;
}
.btn{
  text-align: center;
  margin-top:20px;
}
</style>
